<template>
	<div class="absolute flex justify-between left-33 bottom-0 w-1/3 z-30">
		<button class="w-10 h-10 bg-white rounded-full text-2xl opacity-50 hover:opacity-100 transition-opacity text-blue-500 font-black" @click="back">＜</button>
		<button class="w-10 h-10 bg-white rounded-full text-2xl opacity-50 hover:opacity-100 transition-opacity text-blue-500 font-black" @click="go">＞</button>
	</div>
</template>

<script>
export default {
	methods: {
		back() {
			if (this.$route.path === '/') {
				this.$router.replace('/pie')
			} else if (this.$route.path === '/line') {
				this.$router.replace('/')
			} else {
				this.$router.replace('/line')
			}
		},
		go() {
			if (this.$route.path === '/') {
				this.$router.replace('/line')
			} else if (this.$route.path === '/line') {
				this.$router.replace('/pie')
			} else {
				this.$router.replace('/')
			}
		}
	}
}
</script>

<style></style>
